import React, {useEffect, useRef, useState} from 'react';
import * as echarts from 'echarts';
import {reqGetEchartsArticleList, reqGetUserRoleList} from "../../../../api/backStage/echarts";


const ArtcileChart = () => {
    const chartRef = useRef(null);
    const [echartsArr, setEchartsArr] = useState([])
    let option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '数量',
                type: 'pie',
                
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: echartsArr
            }
        ]
    }


    //获取文章列表
    useEffect(() => {
        const getData = async () => {
            const result = await reqGetUserRoleList()
            const newData=result.data.map((item) => ({name:item.role,value:item.count}))
            setEchartsArr(newData)
        }
        getData()
    }, [])


    useEffect(() => {
        if (chartRef.current) {
            const myChart = echarts.init(chartRef.current);
            myChart.setOption(option)
        }
    }, [option, echartsArr])

    return (
        <div>
            <h1>会员分布情况</h1>
            <div ref={chartRef} style={{width: 400, height: 500}}></div>
        </div>
    );
};

export default ArtcileChart;